<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="item.id">
				<view class="reply"><text v-if="item.choice">已采纳</text>我的回复：{{item.content}}</view>
				<view class="info" @click="jump('/pages/topics/detail?id=' + item.parentId)">
					<view class="user-info u-flex">
						<image :src="item.p.headimg" class="avatar"></image>
						<view class="name u-line-1">{{item.p.nickname}}</view>
						<image :src="item.p.levelLogo" v-if="item.p.levelLogo" class="level"></image>
						<view class="more">
							<text class="t1">查看详情</text><u-icon name="arrow-right" color="#666"></u-icon>
						</view>
					</view>
					<view class="title">{{item.p.title}}</view>
				</view>
			</view>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:[],
				status:'loading'
			}
		},
		methods: {
			getList(){
				this.status = 'loading'
				this.$u.api.answerList({
					page:this.page,
					limit:10,
				}).then(res=>{
					this.list = this.page == 1 ? res : this.list.concat(res)
					this.status = res.length  === 10 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.page ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		}
	}
</script>

<style lang="scss">
	.item{
		border-bottom: 10rpx solid #F2F2F2;padding: 30rpx 50rpx;
		&:last-child{border-bottom: 0;}
		.reply{padding-bottom: 20rpx;word-break: break-all;text-align: justify;font-weight: bold;font-size: 30rpx;
			text{border: 2rpx solid #F55332;color: #F55332;font-size: 22rpx;padding: 2rpx 8rpx;border-radius: 100rpx;display: inline-block;margin-right: 6rpx;white-space: nowrap;vertical-align: bottom;}
		}
		.info{background-color: #F9F9F9;padding: 20rpx;border-radius: 10rpx;
			.user-info{
				.avatar{width: 56rpx;height: 56rpx;border-radius: 50%;flex-shrink: 0;}
				.name{font-size: 26rpx;margin: 0 20rpx;font-weight: bold;}
				.level{width: 70rpx;height: 40rpx;display: block;flex-shrink: 0;}
				.more{color: #555;white-space: nowrap;margin-left: auto;
					.t1{margin-right: 10rpx;}
				}
			}
		}
		.title{font-size: 28rpx;font-weight: bold;word-break: break-all;text-align: justify;padding-top: 20rpx;}
	}
</style>
